home *** CD-ROM | disk | FTP | other *** search
/ MacFormat UK 176 / MF_UK_176_1.iso / DiscContents / In the mag / Widgets / Image Shackle 1.1 / Image Shackle / Image Shackle.wdgt / shackle.js < prev    next >
Encoding:
JavaScript  |  2006-09-22  |  16.4 KB  |  530 lines
  1. //created by  Steve Thorson
  2. //widgets@stephenthorson.com
  3.  
  4. //variables
  5. var xSize = 255; //size of window
  6. var maxIndex = 1; //size of storage array
  7. var trackSection = Math.floor(xSize/8);
  8. var time = 0;
  9. var wholeOutA = 0;
  10. var notWholeOutB = 0;
  11. var dividend = 0;
  12. var turbo = 1;
  13. var spinInterval = 0;
  14. var lowestA = 0;
  15. var lowestA2 = 0;
  16. var intervalId = null;
  17. var origin = (trackSection*4);
  18. var stretch = origin;
  19. var x = origin;
  20. var units = "pixels";
  21. var backOnTrack = null;
  22. var inputColor = "black";
  23. var imageManipulation = false;
  24. var doneButton;
  25. var fadeLoading = 0;
  26. var finishedLoading = 0;
  27. var fadeLoading = 0;
  28. var dontLeaveYet = 0;
  29. var inchInc;
  30.  
  31. //Initial setup
  32. function setup(){
  33.     updateCheck();
  34.     if(null != document.getElementById("version")){
  35.         document.getElementById("version").innerText = "v"+version();
  36.     }
  37.     document.form.InA.value = 640;
  38.     document.form.InB.value = 480;
  39.     document.onmouseup = up;
  40.     document.getElementById("slider").style.left = origin+"px";
  41.     newRatio();
  42.     shackleRoll = new Image();
  43.     shackleRoll.src = "btnShackle_ovr.png";
  44.     shackleReg = new Image("btnShackle.png");
  45.     shackleReg.src = "btnShackle.png";
  46.     clearRoll = new Image("btnClear_ovr.png");
  47.     clearRoll.src = "btnClear_ovr.png";
  48.     clearReg = new Image("btnClear.png");
  49.     clearReg.src = "btnClear.png";
  50.     inputs = document.getElementsByTagName("input");
  51.     doneButton = new AppleGlassButton(document.getElementById("doneButton"), "Done", doFlipToFront);
  52. }
  53.  
  54. //bug fix for blank input fields
  55. function checkBlanks(){
  56.     if(document.form.InA.value == ''){
  57.         document.form.InA.value = 1;
  58.     }
  59.     if(document.form.InB.value == ''){
  60.         document.form.InB.value = 1;
  61.     }
  62. }
  63.  
  64. //new Ratio
  65. function newRatio(skipSetValue) {
  66.     document.getElementById("xValue").innerText = document.form.InA.value;
  67.     document.getElementById("yValue").innerText = document.form.InB.value;
  68.     if(document.form.InA.value < 0 || isNaN(document.form.InA.value)){
  69.         document.form.InA.value = "";
  70.     }
  71.     if(document.form.InB.value < 0 || isNaN(document.form.InB.value)){
  72.         document.form.InB.value = "";
  73.     }
  74.     wholeOutA = 1;
  75.     dividend = (document.form.InA.value/document.form.InB.value);
  76.     notWholeOutB = roundNumber((wholeOutA/dividend),10);//first attempt
  77.     if(document.form.InA.value != 0 && document.form.InB.value != 0 && document.form.InA.value != "" && document.form.InB.value != ""){
  78.         while (roundNumber(notWholeOutB,10) !== Math.floor(notWholeOutB)) {
  79.             wholeOutA++;
  80.             notWholeOutB = wholeOutA/dividend;
  81. //            if(wholeOutA > (document.form.InA.value / 2)){//speeds up process a little but causes bug when dealing with decimal in numerator
  82. //                wholeOutA = Number(document.form.InA.value)-1;  
  83. //                notWholeOutB = Number(document.form.InB.value);
  84. //            }
  85.         }
  86.         lowestA = wholeOutA;
  87.         if(imageManipulation == true){        
  88.             setThumbnailSize();
  89.             if(document.getElementById("width").checked){
  90.                 document.form.OutA.value = document.prefsForm.defaultSize.value;
  91.                 document.form.OutB.value = roundNumber((document.form.OutA.value / dividend),3);
  92.             }else{
  93.                 document.form.OutB.value = document.prefsForm.defaultSize.value;
  94.                 document.form.OutA.value = roundNumber((document.form.OutB.value * dividend),3);
  95.             }
  96.             manualFix();
  97.         }else{
  98.             document.form.OutA.value = wholeOutA;
  99.             document.form.OutB.value = roundNumber(notWholeOutB,3);
  100.         }
  101.     }
  102. }
  103.  
  104. function setThumbnailSize(){
  105.     if(picture.height >= (picture.width * 0.75)){ //tall picture
  106.         document.images['thumbnail'].height = 78;
  107.         document.images['thumbnail'].width = (78 * dividend);
  108.     }else{                                            //wide picture
  109.         document.images['thumbnail'].width = 104;
  110.         document.images['thumbnail'].height = (104 / dividend);
  111.     }
  112. }
  113.  
  114. //Click on Slider
  115. function down(){
  116.     wholeNumberize();
  117.     intervalId = setInterval("grease()",50);
  118.     document.onmousemove = mouseMove;    
  119. }
  120.  
  121. //sets found ratio to nearest whole number when you click on the slider
  122. function wholeNumberize(){
  123.     if(backOnTrack !== null){
  124.         document.form.OutA.value = backOnTrack;
  125.         document.form.OutB.value = document.form.OutA.value/dividend;
  126.         backOnTrack = null;
  127.         if(document.form.OutA.value < lowestA){
  128.             document.form.OutA.value = lowestA;
  129.             document.form.OutB.value = document.form.OutA.value/dividend;            
  130.         }
  131.     }
  132. }
  133.  
  134. //Let go of slider
  135. function up(){
  136.     clearInterval(intervalId);
  137.     document.onmousemove = null;
  138.     document.getElementById("slider").style.left = origin+"px";
  139.     stretch = origin;
  140.     x = origin;
  141.     megapixelCheck();
  142. }
  143.  
  144. //Manual ratio inquiry
  145. function manualA(){
  146.     if(document.form.OutA.value < 0 || isNaN(document.form.OutA.value)){
  147.         document.form.OutA.value = "";
  148.     }
  149.     if(units == "inches"){
  150.         document.form.OutB.value = roundNumber((document.form.OutA.value/dividend), 2);
  151.     }else{
  152.         document.form.OutB.value = roundNumber((document.form.OutA.value/dividend),3);
  153.         manualFix();
  154.     }
  155.     megapixelCheck();
  156. }
  157. function manualB(){
  158.     if(document.form.OutB.value < 0 || isNaN(document.form.OutB.value)){
  159.         document.form.OutB.value = "";
  160.     }
  161.     if(units == "inches"){
  162.         document.form.OutA.value = roundNumber((document.form.OutB.value*dividend), 2);
  163.     }else{
  164.         document.form.OutA.value = roundNumber((document.form.OutB.value*dividend), 3);
  165.         manualFix();
  166.     }
  167.     megapixelCheck();
  168. }
  169. function manualFix(){ //does not effect what is currently displayed but makes whole number ratio in background to get slider back on track
  170.     wholeOutA = Math.floor(document.form.OutA.value);
  171.     notWholeOutB = wholeOutA/dividend;//first attempt
  172.     while (notWholeOutB !== Math.floor(notWholeOutB)) {
  173.         wholeOutA++;
  174.         notWholeOutB = wholeOutA/dividend;
  175.     }
  176.     backOnTrack = wholeOutA;
  177. }
  178.  
  179. //bug fix for common javascript math bug
  180. function roundNumber(rnum,rlength) {
  181.     //rnum = number to round
  182.     //rlength = The number of decimal places to round to
  183.     if (rnum > 8191 && rnum < 10485) {//fix for known javascript bug
  184.         rnum = rnum-5000;
  185.         var newnumber = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
  186.         newnumber = newnumber+5000;
  187.     } else {
  188.         var newnumber = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
  189.     }
  190.     return(newnumber);
  191. }
  192.  
  193.  
  194. //slider math
  195. function grease(){
  196.         stretch = ((((x - stretch) * 0.3) + stretch)); //stretch is the value of the slider div. x is the mouse value.
  197.         document.getElementById("slider").style.left = stretch+"px";
  198.         if(stretch < 30){ //sets boundaries for slider
  199.             document.getElementById("slider").style.left = "30px";
  200.         }else if(stretch > ((trackSection*8)-30)){ //sets boundaries for slider
  201.             document.getElementById("slider").style.left = ((trackSection*8)-30)+"px";
  202.         }
  203.     if(stretch <= trackSection){//neg4
  204.         time+=100;
  205.         turbo = 7;
  206.         section=-4;
  207.     }else if(stretch >= trackSection && stretch < (trackSection*2)){//neg3
  208.         time+=50;
  209.         section=-3;
  210.         turbo = 2;
  211.     }else if(stretch > (trackSection*2) && stretch <= (trackSection*3)){//neg2
  212.         time+=25;
  213.         section=-2;
  214.         turbo = 1;
  215.     }else if(stretch > (trackSection*3) && stretch < origin){//neg1
  216.         time+=10;
  217.         section=-1;
  218.         turbo = 1;
  219.     }else if(stretch == origin){//0
  220.         section=0;
  221.         turbo = 1;
  222.         time=0;
  223.     }else if(stretch > origin && stretch < (trackSection*5)){//pos1
  224.         time+=10;
  225.         section=1;
  226.         turbo = 1;
  227.     }else if(stretch >= (trackSection*5) && stretch < (trackSection*6)){//pos2
  228.         time+=25;
  229.         section=2;
  230.         turbo = 1;
  231.     }else if(stretch >= (trackSection*6) && stretch < (trackSection*7)){//pos3
  232.         time+=50;
  233.         section=3;
  234.         turbo = 2;
  235.     }else if(stretch >= (trackSection*7)){//pos4
  236.         time+=100;
  237.         turbo = 7;
  238.         section=4;
  239.     }
  240.     if(section < 0){
  241.         lowestA2 = lowestA * -1;
  242.         inchInc = -0.01;
  243.     }else{
  244.         lowestA2 = lowestA;
  245.         inchInc = 0.01;
  246.     }
  247.     if(time>=100 || time<=-100){
  248. //        if(units == "inches"){
  249. //            document.form.OutA.value = Number(document.form.OutA.value) + (inchInc * turbo);
  250. //            document.form.OutB.value = roundNumber(Number(document.form.OutA.value)/dividend,2);
  251. //            if(Number(document.form.OutA.value) <= 0 || Number(document.form.OutB.value) <= 0){
  252. //                document.form.OutA.value = (0.01 * turbo);
  253. //                document.form.OutB.value = roundNumber(Number(document.form.OutA.value)/dividend,2);
  254. //            }
  255. //            if(document.form.OutA.value.length > 8 || document.form.OutB.value.length > 8){
  256. //                document.form.OutA.value = Number(document.form.OutA.value) - (inchInc * turbo);
  257. //                document.form.OutB.value = roundNumber(Number(document.form.OutA.value)/dividend,2);
  258. //            }
  259. //        }else{
  260.             document.form.OutA.value = Number(document.form.OutA.value) + (lowestA2 * turbo);
  261.             if(document.form.OutA.value < lowestA){
  262.                 document.form.OutA.value = lowestA;
  263.             }
  264.             document.form.OutB.value = roundNumber((document.form.OutA.value/dividend),3);
  265.             if(document.form.OutA.value.length > 8 || document.form.OutB.value.length > 8){
  266.                 document.form.OutA.value = Number(document.form.OutA.value) - (lowestA2 * turbo);
  267.                 document.form.OutB.value = roundNumber((document.form.OutA.value/dividend),3);
  268.             }
  269. //        }
  270.         time=0;
  271.     }
  272. }
  273.  
  274. //MegapixelCheck
  275. function megapixelCheck(){
  276.     var temp_A = Number(document.form.OutA.value);
  277.     var temp_B = Number(document.form.OutB.value);
  278.     if(units == "inches"){
  279.         temp_A *= 300;
  280.         temp_B *= 300;
  281.     }
  282.     if((temp_A * temp_B) > 10000000 && imageManipulation == true){//checks to see if image is less than 10 megapixels
  283.         if(inputColor == "black"){
  284.             document.images['shackle'].style.opacity = .5;
  285.             document.getElementById('resizeStopper').style.display = "block";
  286.             for(i=0; i<inputs.length; i++){
  287.                 input = inputs[i];
  288.                 input.style.color = "FF0000";
  289.                 inputColor = "red";
  290.             }
  291.         }
  292.     }else{
  293.         if(inputColor == "red"){    
  294.             document.images['shackle'].style.opacity = 1;
  295.             document.getElementById('resizeStopper').style.display = "none";
  296.             for(i=0; i<inputs.length; i++){
  297.                 input = inputs[i];
  298.                 input.style.color = "000000";
  299.                 inputColor = "black";
  300.             }
  301.         }
  302.     }
  303. }
  304.  
  305. //sliding slider    
  306. function mouseMove(e) {
  307.     var pageX = e.pageX;
  308.     if(pageX != -1){ //fix for safari                       
  309.         x=pageX-7;
  310.     }
  311. }
  312.  
  313.  
  314. //clears current thumbnail
  315. function clearImage(fromWhere){
  316.     imageManipulation = false;
  317.     megapixelCheck();
  318.     document.getElementById("disabledFields").style.display = "none";
  319.     document.getElementById("inputs").style.display = "block";
  320.     document.getElementById("buttons").style.display = "none";
  321.     document.getElementById("drag").style.display = "block";
  322.     document.images['clear'].src=clearReg.src;
  323.     document.images['thumbnail'].width = 104;
  324.     document.images['thumbnail'].height = 78;
  325.     if(fromWhere == "invalidFile"){
  326.         document.getElementById("drag").src = "btnInvalid.png";
  327.         document.images['thumbnail'].src = "unsupported.jpg";
  328.         document.getElementById("thumbnail").style.display = "block";
  329.     }else if(fromWhere == "dragenter"){
  330.         document.getElementById("drag").src = "btnDrag.png";
  331.     }else if (fromWhere == "credits"){
  332.         document.images['thumbnail'].src = ".credits.jpg";
  333.     }else{
  334.         document.getElementById("thumbnail").style.display = "none";
  335.         document.images['thumbnail'].src="spacer.gif";
  336.     }
  337. }
  338.  
  339. //on drop event
  340. function dragdrop (event) {
  341.     uri = event.dataTransfer.getData("text/uri-list")
  342.     uri = unescape(uri).replace(/file:\/\/localhost/g,'');
  343.     slash = uri.lastIndexOf('/');
  344.     extension = uri.substring(uri.lastIndexOf('.'));
  345.     filename  = uri.substring(slash, uri.lastIndexOf('.'));
  346.     directory = uri.substring(0, slash);
  347.     switch(extension.toLowerCase()){
  348.         case ".jpeg" :
  349.             validFile = true;
  350.             break;
  351.         case ".jpg" :
  352.             validFile = true;
  353.             break;
  354.         case ".gif" :
  355.             validFile = true;
  356.             break;
  357.         case ".tif" :
  358.             validFile = true;
  359.             break;
  360.         case ".tiff" :
  361.             validFile = true;
  362.             break;
  363.         case ".psd" :
  364.             validFile = true;
  365.             break;
  366.         case ".png" :
  367.             validFile = true;
  368.             break;
  369.         case ".pict" :
  370.             validFile = true;
  371.             break;
  372.         case ".bmp" :
  373.             validFile = true;
  374.             break;
  375.         default :
  376.             validFile = false;
  377.             break;
  378.     }
  379.     if(/\n/.test(uri)){ //if more than one file
  380.         validFile = false;
  381.     }
  382.     if(filename == "/shackle"){
  383.         clearImage("credits");
  384.     }else if(validFile == true){
  385.         picture = new Image();
  386.         picture.onload = photoLoaded;
  387.         picture.src = (uri);
  388.         
  389.     }else{
  390.         clearImage("invalidFile");
  391.     }
  392. }
  393.  
  394. //Dropped image is loaded
  395. function photoLoaded(){
  396.     imageManipulation = true;
  397.     document.form.InA.value = picture.width;
  398.     document.form.InB.value = picture.height;
  399.     newRatio();
  400.     document.getElementById("inputs").style.display = "none";
  401.     document.getElementById("disabledFields").style.display = "block";
  402.     document.getElementById("thumbnail").style.display = "block";
  403.     document.images['thumbnail'].src=picture.src
  404.     document.getElementById("drag").style.display = "none";
  405.     document.getElementById("buttons").style.display = "block";
  406. }
  407.  
  408. //function that actually resizes the image
  409. function resize(){
  410.     if(document.prefsForm.jpgconvert.checked){
  411.         useExtension = ".jpg";
  412.         convertToJpg = '-s format jpeg ';
  413.     }else{
  414.         useExtension = extension;
  415.         convertToJpg = '';
  416.     }
  417.     if(units == "inches"){
  418.         var inch_width = document.form.OutA.value;
  419.         var inch_height = document.form.OutB.value;
  420.         var width = inch_width * 300;
  421.         var height = inch_height * 300;
  422.         var obj = widget.system('/usr/bin/sips ' +convertToJpg +' -s dpiHeight 300 -s dpiWidth 300 -z ' +height +' ' +width +' "' +uri +'" --out "' +directory +filename +'_' +inch_width +'x' +inch_height+'in.shkl' +useExtension +'"', null);
  423.     }else{    
  424.     var width = Math.round(document.form.OutA.value);
  425.     var height = Math.round(document.form.OutB.value);
  426.     var obj = widget.system('/usr/bin/sips ' +convertToJpg +'-z ' +height +' ' +width +' "' +uri +'" --out "' +directory +filename +'_' +width +'x' +height+'.shkl' +useExtension +'"', null);
  427.     }
  428. }
  429.  
  430. //on drag in event
  431. function dragenter (event) {
  432.     event.stopPropagation();
  433.     event.preventDefault();
  434.     clearImage('dragenter');
  435. }
  436.  
  437. function dragover (event) {
  438.     event.stopPropagation();
  439.     event.preventDefault();
  440.     clearInterval(dontLeaveYet);
  441.     document.images['thumbnail'].src = "over.jpg";
  442.     document.getElementById("thumbnail").style.display = "block";
  443. }
  444. //on drag out event
  445. function dragleave (event) {
  446.     event.stopPropagation();
  447.     event.preventDefault();
  448.     clearInterval(dontLeaveYet);
  449.     dontLeaveYet = setInterval(timeToLeave, 300);
  450. }
  451.  
  452. function timeToLeave(){
  453.     clearInterval(dontLeaveYet);
  454.     document.getElementById("thumbnail").style.display = "none";
  455. }
  456.  
  457. //loading screen
  458. function beginFade(){
  459.         clearInterval(fadeLoading);
  460.         clearInterval(finishedLoading);
  461.         clearInterval(fadeLoading);
  462.         document.getElementById("loading").style.display = "block";
  463.         i=0;
  464.         fadeLoading = setInterval(fadeLoadingIn, 50);
  465. }
  466.  
  467. function hideLoading(){
  468.     clearInterval(finishedLoading);
  469.     i= (7);
  470.     fadeLoading=setInterval(fadeLoadingOut, 50);
  471. }
  472.  
  473. function fadeLoadingIn(){
  474.         if(i < 8){
  475.             document.getElementById("loading").style.opacity = "."+i;
  476.             i++;
  477.         }else{
  478.             clearInterval(fadeLoading);
  479.             //document.getElementById(id).style.opacity = 1;
  480.             resize(); //resize the file
  481.             finishedLoading=setInterval(hideLoading, 500);
  482.         }
  483. }
  484.  
  485. function fadeLoadingOut(){
  486.         if(i > 0){
  487.             document.getElementById("loading").style.opacity = "."+i;
  488.             i--;
  489.         }else{
  490.             document.getElementById("loading").style.display = "none";
  491.             clearInterval(fadeLoading);
  492.         }
  493. }
  494. function labelClick(event, id)
  495. {
  496.     id.checked = !id.checked;
  497. }
  498. function changeUnit(){
  499.     if (document.getElementById('units1').innerText == "px"){
  500.         document.getElementById('units1').innerText="in";
  501.         document.getElementById('units2').innerText="in";
  502.         document.getElementById('sliderOverlay').style.display = 'block';
  503.         document.form.OutA.value = roundNumber(document.form.OutA.value / 300, 2);
  504.         document.form.OutB.value = roundNumber(document.form.OutA.value / dividend, 2);
  505.         units = "inches";
  506.         
  507.     }else{
  508.         document.getElementById('units1').innerText="px";
  509.         document.getElementById('units2').innerText="px";
  510.         document.getElementById('sliderOverlay').style.display = 'none';
  511.         document.form.OutA.value = roundNumber(document.form.OutA.value * 300, 3);
  512.         document.form.OutB.value = roundNumber(document.form.OutA.value / dividend, 3);
  513.         units = "pixels";
  514.         manualFix();
  515.     }
  516. }
  517.  
  518. function updateCheck(){
  519.     var XMLHttpRequest_object = new XMLHttpRequest();
  520.     XMLHttpRequest_object.open("GET", "http://www.cre8tivegroup.com/widgets/index.php?version=" +version());
  521.     XMLHttpRequest_object.onreadystatechange = function(){
  522.         if(XMLHttpRequest_object.readyState == 4 && XMLHttpRequest_object.status == 200){
  523.             if(XMLHttpRequest_object.responseText == "update"){
  524.                 document.getElementById('front').style.display = 'none';
  525.                 document.getElementById('needUpdate').style.display = 'block';
  526.             }
  527.         }
  528.     }
  529.     XMLHttpRequest_object.send(null);
  530. }